CSS 长度单位

绝对单位

单位 全称 描述
in inch 英寸
cm centimeter 厘米
mm millimeter 毫米
pt point 磅(印刷单位,大小为 1/72 英寸)
pc Pica 派卡(印刷单位,大小为 1/6 英寸)
px pixel 像素

绝对单位没啥好解释的,顶多会在pxpt之间的区别有点疑问:

  • pt是一个印刷单位,不管在任何的地方,任何的显示器上,都是一样长的,都是 1/72 英寸。
  • px就不一样了,在不同 PPI(Pixels Per Inch)的设备上,一个像素的长度是不一样的。PPI 高的地方,说明像素点密集,一个px的长度也就短。
  • 这两者之间的具体区别可以见这篇文章:《CSS 长度单位:px 和 pt 的区别》

相对单位

单位 全称 描述
% percentage 百分比
ch 当前字体的字符”0”的宽度
em equal-M-width 当前字体的大写”M”的宽度
ex equal-x-height 当前字体的小写”x”的高度
rem root equal-M-width 根节点字体的大写”M”的宽度
vh 1/100th of the height of the viewport 视窗高度的百分之一
vw 1/100th of the width of the viewport 视窗宽度的百分之一
vmin 1/100th of the minimum value of the viewport 视窗较短边的百分之一
vmax 1/100th of the maximum value of the viewport 视窗较长边的百分之一

当然其他还有很多距离单位,我可能没法完全收集齐,但是我会后续补充。
然后就简单谈一下这些单位的一些具体的注意事项吧:

  • 关于%,就很简单,相对于父元素而言,width:300%就是父元素高度的三倍;
  • 关于chEric Meyer’s 的博客有谈到:对于一种等宽字体,如果你给出一个width: 40ch;的盒子,那么就可以刚好容纳 40 个这种字体的字符。一般和盲文相关。
  • 关于rem:一般用于网格布局,使得界面能随着内容按照比例缩放。
  • 关于还算比较具体的一个 CSS 单位的支持度的图片,具体可以用Can I Use来测试:

角度单位

单位 全称 描述
deg degree 角度
grad grad 百分度
rad radian 弧度
turn turn 圈数
  • 这些单位一般而言,正的就是顺时针转,负数代表逆时针转。
  • deg: 就是角度,就是一个整圆 360°,1deg就是
  • grad: 百分度,一个整圆切成 400 份,1grad = 360°/400
  • rad: 弧度,初中知识,1rad = 180°/π
  • turn: 这个就更简单了,1turn = 360°

时间单位

单位 全称 描述
s second
ms millisecond 毫秒

频率单位

一般用于听(或说)级联样式表中,用来表示声音频率。

单位 全称 描述
hz hertz 赫兹
ms kilohertz 千赫
1
2
3
4
5
6
p.low {
pitch: 105hz;
}
q.squeal {
pitch: 135hz;
}